<template>
  <div v-if="pageflag" class="drawer-bottom-right">
    <!--  -->
    <div class="head display-flex ai-center">
      <span v-if="selectedArea.length > 0" class="title"
        >当前监控：{{ selectedCamera ? selectedCamera.name : "" }}</span
      >
      <el-dropdown v-if="selectedArea.length > 0" @command="changeVideo">
        <img
          style="position: relative; top: 1px"
          class="ml-12 cursor-pointer"
          src="@/assets/images/dust/select.png"
          alt=""
        />
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, k) in selectedArea"
            :command="item"
            :key="k"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="contetn_left-bottom-video">
      <div class="videoWrap">
        <div v-if="showVideo" id="mmid"></div>
        <div v-else class="videoImg">
          <!-- <h1>设备不在线，请检查设备网络</h1> -->
        </div>
      </div>
    </div>
  </div>
  <Reacquire v-else @onclick="getData(enterpriseId)" style="line-height: 100px">
    重新获取{{ pageflag }}
  </Reacquire>
</template>
<script>
import HlsJsPlayer from "xgplayer-hls.js";
export default {
  data() {
    return {
      pageflag: false,
      videoWrap: false,
      selectedArea: [],
      selectedCamera: {},
      videoPlayer: null,
    };
  },
  props: {
    enterpriseId: {
      type: String,
      default: () => "",
    },
  },
  computed: {},
  mounted() {
    this.getData(this.enterpriseId);
  },
  methods: {
    async getData(id) {
      try {
        const res = await this.$api.screen.getVideoList(id);
        this.pageflag = true;
        this.selectedarea = [];
        this.selectedArea = {};
        // 判断视频是否为空
        if (res.length > 0) {
          this.pageflag = true;
          this.showVideo = true;
          this.selectedArea = res;
          this.selectedCamera = res[0];
          if (this.selectedCamera.playUrl) {
            this.initVideo(this.selectedCamera.playUrl); // 重置视频url
          } else {
            this.showVideo = false;
          }
        } else {
          this.pageflag = true;
          this.showVideo = false;
          this.selectedarea = [];
          this.selectedArea = {};
        }
      } catch (err) {
        console.log("", err);
      }
    },
  },
  changeVideo(data) {
    if (data.name !== this.selectedArea.name) {
      this.selectedCamera = data;
      this.$nextTick(() => {
        // this.showVideo = false
        // 执行销毁西瓜视频方法
        if (this.videoPlayer) {
          this.videoPlayer.destroy();
        }
        // 线上地址
        if (this.selectedCamera.playUrl) {
          this.showVideo = true;
          this.initVideo(this.selectedCamera.playUrl); // 重置视频url
        } else {
          this.showVideo = false;
        }
      });
    }
  },

  // 初始化视频
  initVideo(videoUrl) {
    setTimeout(() => {
      this.$nextTick(() => {
        this.videoPlayer = new HlsJsPlayer({
          el: document.querySelector("#mmid"),
          url: videoUrl,
          width: "100%",
          height: "100%",
          volume: 0.6, // 初始音量
          autoplay: true, // 自动播放
          autoplayMuted: true,
          playsinline: true,
          isLive: false,
          cors: true,
        });
      });
    });
  },
  beforeDestroy() {
    if (this.videoPlayer) {
      this.videoPlayer.destroy();
    }
  },
};
</script>
<style lang="scss" scoped>
.drawer-bottom-right {
  height: 100%;
  text-align: -webkit-center;
  border: 1px solid RGBA(217, 217, 217, 0.6);
  .head {
    padding: 10px;
    .title {
      color: #a3c3e5;
    }
  }
  .contetn_left-bottom-video {
    height: calc(100% - 40px);
    .videoWrap {
      font-size: 0;
      height: 100%;
      background-color: none;
      // border: 1px solid red;
    }
    .videoWrap video {
      display: block;
      width: 99%;
      // height:346px;
      // object-fit: fill;
      object-fit: contain;
      outline: none !important;
      // 注意：IE和Edge浏览器不支持mix-blend-mode属性
      mix-blend-mode: darken;
    }
    video:focus {
      outline: none !important;
    }
    .videoImg {
      width: 60%;
      height: 100%;
      background-image: url("~@/assets/images/no-video.png");
      background-size: 100% 100%;
    }
  }
}
::v-deep .xgplayer-skin-default .xgplayer-enter {
  // border: 1px solid blue;
}
::v-deep .xgplayer-skin-default .xgplayer-enter .xgplayer-enter-spinner {
  width: 5rem !important;
  height: 5rem !important;
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  bottom: 0;
  margin: auto;
  // border: 1px solid red;
  // width:0.666rem !important; height:0.8rem !important
}
</style>
